import {messages} from "share/common";
import React, { Component } from "react"
import Template from "components/UI/template"
import { Tabs } from 'antd'
import Condition from "components/condition"
import ExpenseReviewRecoil from "./expense-review-recoil"
import ExpenseReviewBacklash from "./expense-review-backlash"
import LoanReviewBacklash from "./loan-review-backlash"
import LoanReviewRecoil from "./loan-review-recoil"

const { Header, Middle } = Template;
const { TabPane } = Tabs;
const { If } = Condition;

class ReviewBacklash extends Component {

  state = {
    status: 'expense-review-backlash'
  };

  render() {
    const { status } = this.state;
    return (
      <Template>
        <Header>
          <Tabs defaultActiveKey={status} onChange={key => { this.setState({ status: key })}}>
            <TabPane key={'expense-review-backlash'} tab={messages('expense-14.key461')/*【报销单】可反冲*/}/>
            <TabPane key={'expense-review-recoil'} tab={messages('expense-14.key463')/*【报销单】已反冲*/}/>
            <TabPane key={'loan-review-backlash'} tab={messages('expense-14.key464')/*【借款单】可反冲*/}/>
            <TabPane key={'loan-review-recoil'} tab={messages('expense-14.key466')/*【借款单】已反冲*/}/>
          </Tabs>
        </Header>
        <Middle>
          <If value={status === 'expense-review-backlash'}>
            <ExpenseReviewBacklash/>
          </If>
          <If value={status === 'expense-review-recoil'}>
            <ExpenseReviewRecoil/>
          </If>
          <If value={status === 'loan-review-backlash'}>
            <LoanReviewBacklash/>
          </If>
          <If value={status === 'loan-review-recoil'}>
            <LoanReviewRecoil/>
          </If>
        </Middle>
      </Template>
    )
  }

}

export default ReviewBacklash
